<div>
    <h2>{{'MY_PROFILE'|translate}}</h2>
    <div style="max-width: 375px;">
        <div style="display: flex; margin-bottom: 16px;align-items: center;">
            <div style="margin-right: 16px;">{{'USER_ID'|translate}}</div>
            <div>{{currentUser?.id}}</div>
        </div>
        <div style="display: flex; margin-bottom: 16px;align-items:flex-end;">
            <div style="margin-right: 16px;">{{'USER_EMAIL'|translate}}</div>
            <div>{{currentUser?.email}}</div>
        </div>
        <div style="display: flex; margin-bottom: 16px;align-items:flex-end;">
            <div style="margin-right: 16px;">{{'CREATED_AT'|translate}}</div>
            <div>{{currentUser?.createdAt|date:'M/d/yy, h:mm:ss a'}}</div>
        </div>
        <form [formGroup]="profileFg">
            <div style="margin-bottom: 8px;">{{'AVATAR'| translate}}</div>
            <app-image-upload [value]="profileFg.get('avatar').value" (upload)="handleFileUpload($event)"></app-image-upload>
            <mat-form-field>
                <mat-label>{{'USERNAME'| translate}}</mat-label>
                <input matInput formControlName="username">
            </mat-form-field>
            <div style="display: flex;">
                <mat-form-field style="margin-right: 24px;">
                    <mat-label>{{'COUNTRY_CODE'|translate}}</mat-label>
                    <mat-select formControlName="mobileCountryCode" required="">
                        <mat-option value="1">
                            +1
                        </mat-option>
                        <mat-option value="86">
                            +86
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field>
                    <mat-label>{{'MOBILE_NUMBER'| translate}}<span class="mat-required">*</span></mat-label>
                    <input matInput formControlName="mobileNumber">
                </mat-form-field>
            </div>
            <mat-form-field>
                <mat-label>{{'PREF_LANGUAGE'|translate}}</mat-label>
                <mat-select formControlName="language">
                    <mat-option value="ENGLISH">
                        {{'ENGLISH'|translate}}
                    </mat-option>
                    <mat-option value="MANDARIN">
                        {{'CHINESE'|translate}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </form>
        <button mat-raised-button color="primary" style="margin-bottom: 20px;margin-top: 20px;"
            (click)="update()">{{'UPDATE'|translate}}</button>
    </div>
    <div style="margin-top: 24px;">
        <form [formGroup]="updatePwdFg">
            <mat-form-field>
                <mat-label>{{'ENTER_YOUR_CURRENT_PASSWORD'| translate}}<span class="mat-required">*</span></mat-label>
                <input matInput formControlName="currentPwd">
                <div style="font-size: 12px; color: red;">{{currentPwdErrorMsg|translate}}</div>
            </mat-form-field>
            <mat-form-field>
                <mat-label>{{'ENTER_YOUR_NEW_PASSWORD'| translate}}<span class="mat-required">*</span></mat-label>
                <input matInput formControlName="pwd">
                <div style="font-size: 12px; color: red;">{{newPwdErrorMsg|translate}}</div>
            </mat-form-field>
            <mat-form-field>
                <mat-label>{{'REENTER_YOUR_NEW_PASSWORD'| translate}}<span class="mat-required">*</span></mat-label>
                <input matInput formControlName="confirmPwd">
                <div style="font-size: 12px; color: red;">{{confirmPwdErrorMsg|translate}}</div>
            </mat-form-field>
        </form>
        <button mat-raised-button color="primary" style="margin-bottom: 20px;margin-top: 20px;"
            (click)="updatePwd()">{{'UPDATE_PASSWORD'|translate}}</button>
    </div>
</div>